<template>
  <div ref="chartRadar" style="width: 100%;height:450px;"></div>
</template>

<script>
import echarts from 'echarts'
import { getScoreApi } from '@/api/intelligence' 
export default {
  props:{
    gasId:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rData: [ 0,0,0,0,0 ]
    }
  },
  mounted(){
    this.getScore( this.gasId )
  },
  methods: {
    initChart() {
      let myChart = echarts.init( this.$refs['chartRadar'] )
      let option = this.getOptions( this.rData )
      myChart.setOption(option)
    },
    getOptions(value) {
      let option = {
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          },
          //设置最大值，参考系 最大10分
          indicator: [
            { name: '会员数量', max: 10 },
            { name: '消费次数', max: 10 },
            { name: '新客用户', max: 10 },
            { name: '客户留存', max: 10 },
            { name: '消费金额', max: 10 }
          ],
          axisLine:{
            lineStyle:{
              color: '#D8DCF1',
              width: 1.5
            }
          },
          splitLine: {
            lineStyle:{
              color: '#D8DCF1',
              width: 1.5
            }
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(255, 255, 255, 1)','rgba(216, 220, 241, 0.1)']
            }
          }
        },
        series: [{
          name: '自我诊断分析评分（分）:',
          type: 'radar',
          areaStyle: {
            // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                  offset: 0, color: 'rgba(255, 148, 22, 0.05)' // 0% 处的颜色
              }, {
                  offset: 1, color: 'rgba(255, 148, 22, 0.3)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle:{
            color: '#FF9416',
            width: 2.5
          },
          // data: [{ value: [ 10, 1, 6.5, 7.5, 8 ] }]
          data: [{ value }]
        }]
      }
      return option
    },
    async getScore(gasId){
      try{
        // 此处之所以一个个结构出来在一个个赋值，为了确保顺序正确
        const { result: { gasVipScore, consumeFrenquencyScore, newCustomerScore, oldCustomerLoseScore, consumeAmountScore } } = await getScoreApi({gasId})
        if(gasVipScore === undefined) return
        this.rData = [ gasVipScore, consumeFrenquencyScore, newCustomerScore, oldCustomerLoseScore, consumeAmountScore ]
      }catch(e){
        console.log(e)
      }finally{
        this.initChart()
      }
    }
  }
}
</script>
